<!DOCTYPE html>
<html>
<head>
    <title>Customizing appearance</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.mobile.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
    <link href="../../../styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
    <a href="../index.html">Back</a>
    <div data-role="view" id="dark-theme" data-title="Dark">
    <header data-role="header">
        <div data-role="navbar">
            <a id="back-button" class="nav-button" data-align="left" data-role="backbutton">Back</a>
            <span data-role="view-title">Dark Theme</span>
            <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
            <a data-align="right" data-role="button" href="#light-theme">Light Theme</a>
        </div>
    </header>
    <div data-role="scrollview">
            <div class="photo photo1"></div>

            <div class="photo photo2"></div>

            <div class="photo photo3"></div>

            <div class="photo photo4"></div>

            <div class="photo photo5"></div>

            <div class="photo photo6"></div>

            <div class="photo photo7"></div>

            <div class="photo photo8"></div>

            <div class="photo photo9"></div>

            <div class="photo photo10"></div>
     </div>
</div>

<div data-role="view" id="light-theme" data-title="Light">
    <header data-role="header">
        <div data-role="navbar">
            <a id="back-button" class="nav-button" data-align="left" data-role="backbutton">Back</a>
            <span data-role="view-title">Light Theme</span>
            <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
            <a data-align="right" data-role="button" href="#dark-theme">Dark Theme</a>
        </div>
    </header>
    <div data-role="scrollview">
            <div class="photo photo1"></div>

            <div class="photo photo2"></div>

            <div class="photo photo3"></div>

            <div class="photo photo4"></div>

            <div class="photo photo5"></div>

            <div class="photo photo6"></div>

            <div class="photo photo7"></div>

            <div class="photo photo8"></div>

            <div class="photo photo9"></div>

            <div class="photo photo10"></div>
     </div>
</div>
<style scoped>

#dark-theme .km-content, #dark-theme .km-navbar {
	background-color: #111;
}

#light-theme .km-content, #light-theme .km-navbar {
	background-color: #ddd;
}

#light-theme .km-view-title {
	color: #666;
	text-shadow: 0 1px rgba(255, 255, 255, 0.6);
}
.km-tablet .km-ios #dark-theme .km-view-title {
    color: #fff;
    text-shadow: 0 -1px rgba(0,0,0,.5);
}
.km-android #light-theme .km-text {
	color: #666;
}

#dark-theme .photo,
#light-theme .photo {
    width: 277px;
    margin: 7em 20px 7px;
    height: 220px;
    display: inline-block;
    -webkit-background-size: auto 100%;
    -webkit-transform: translatez(0);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

.photo1 {background-image: url("../../content/mobile/cities/220/sydney.jpg");}
.photo2 {background-image: url("../../content/mobile/cities/220/bonn.jpg");}
.photo3 {background-image: url("../../content/mobile/cities/220/boston.jpg");}
.photo4 {background-image: url("../../content/mobile/cities/220/cairo.jpg");}
.photo5 {background-image: url("../../content/mobile/cities/220/cancun.jpg");}
.photo6 {background-image: url("../../content/mobile/cities/220/cape-town.jpg");}
.photo7 {background-image: url("../../content/mobile/cities/220/liverpool.jpg");}
.photo8 {background-image: url("../../content/mobile/cities/220/london.jpg");}
.photo9 {background-image: url("../../content/mobile/cities/220/melbourne.jpg");}
.photo10 {background-image: url("../../content/mobile/cities/220/san-francisco.jpg");}
</style>


    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>
</body>
</html>
